
<template>
  <div class="form-container">
    <el-form v-if="formData.cellType==='simple'" label-width="100px">
      <el-form-item label="行高：">
        <el-input v-model="formData.simple.lineHeight" type="text" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="文本内容：">
        <el-input v-model="formData.simple.value" type="textarea" :rows="2" @change="dataChange"></el-input>
      </el-form-item>
    </el-form>
    <el-form v-else-if="formData.cellType==='expression'" label-width="100px">
      <el-form-item label="换行计算：">
        <el-radio v-model="formData.expression.wrapCompute" :label="true" @change="dataChange">打开</el-radio>
        <el-radio v-model="formData.expression.wrapCompute" :label="false" @change="dataChange">关闭</el-radio>
      </el-form-item>
      <el-form-item label="数据展开方向：" label-width="130px">
        <el-radio v-model="formData.expression.expand" label="Down" @change="dataChange">下方</el-radio>
        <el-radio v-model="formData.expression.expand" label="Right" @change="dataChange">向右</el-radio>
        <el-radio v-model="formData.expression.expand" label="None" @change="dataChange">关闭</el-radio>
      </el-form-item>
      <el-form-item label="格式化：">
        <el-select v-model="formData.expression.format" placeholder="请选择" class="w-100pc" clearable @change="dataChange">
          <el-option v-for="item in propertyHelper.formatList" :key="item" :label="item" :value="item">
          </el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="条件属性：">
        <el-button type="success" @click="showConditionDialog=true">设置条件</el-button>
      </el-form-item>
      <el-form-item label="表达式：">
        <el-input v-model="formData.expression.value" type="textarea" :rows="2" @change="dataChange"></el-input>
      </el-form-item>
    </el-form>
    <el-form v-if="formData.cellType==='slash'" label-width="50px" class="slash-box">
      <el-form-item v-for="(slash, index) in formData.slashs" :key="index" label="名称:">
        <el-input v-model="slash.text" type="text" class="w-60" @change="dataChange"></el-input>
        <span class="slash-item">X:</span>
        <el-input v-model="slash.x" type="number" class="w-60" @change="dataChange"></el-input>
        <span class="slash-item">Y:</span>
        <el-input v-model="slash.y" type="number" class="w-60" @change="dataChange"></el-input>
        <span class="slash-item">角度:</span>
        <el-input v-model="slash.degree" type="number" class="w-60" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label-width="0">
        <el-button type="primary" @click="refreshSlash"> <i class="el-icon-yrt-shuaxin"></i> 刷新</el-button>
      </el-form-item>
    </el-form>
    <el-form v-if="formData.cellType==='image'" label-width="100px" class="slash-box">
      <el-form-item label="宽：">
        <el-input v-model="formData.image.width" type="number" placeholder="为0或空表示采用图片默认宽度" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="高：">
        <el-input v-model="formData.image.height" type="number" placeholder="为0或空表示采用图片默认高度" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="图片来源：">
        <el-select v-model="formData.image.source" placeholder="请选择" class="w-100pc" @change="imageSourceChange">
          <el-option label="路径" value="text"></el-option>
          <el-option label="表达式" value="expression"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.image.source==='text'" label="路径：">
        <el-input v-model="formData.image.value" type="text" title="默认支持以classpath:开头位于classpath下的图片文件，或以/开头位于WEB应用根下或某目录下的图片文件" placeholder="默认支持以classpath:开头位于classpath下的图片文件，或以/开头位于WEB应用根下或某目录下的图片文件" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.image.source==='expression'" label="数据展开方向：" label-width="120px">
        <el-radio v-model="formData.image.expand" label="Down" @change="dataChange">下方</el-radio>
        <el-radio v-model="formData.image.expand" label="Right" @change="dataChange">向右</el-radio>
        <el-radio v-model="formData.image.expand" label="None" @change="dataChange">关闭</el-radio>
      </el-form-item>
      <el-form-item v-if="formData.image.source==='expression'" label="表达式：">
        <el-input v-model="formData.image.value" type="textarea" :rows="2" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
    </el-form>
    <el-form v-if="formData.cellType==='zxing'" label-width="100px" class="slash-box">
      <el-form-item label="宽：">
        <el-input v-model="formData.zxing.width" type="number" placeholder="请输入条码宽度" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item label="高：">
        <el-input v-model="formData.zxing.height" type="number" placeholder="请输入条码高度" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.zxing.category==='barcode'" label="条码格式：">
        <el-select v-model="formData.zxing.format" placeholder="请选择" class="w-100pc" @change="dataChange">
          <el-option label="AZTEC" value="AZTEC"></el-option>
          <el-option label="CODABAR" value="CODABAR"></el-option>
          <el-option label="CODE_39" value="CODE_39"></el-option>
          <el-option label="CODE_93" value="CODE_93"></el-option>
          <el-option label="CODE_128" value="CODE_128"></el-option>
          <el-option label="CODABAR" value="CODABAR"></el-option>
          <el-option label="DATA_MATRIX" value="DATA_MATRIX"></el-option>
          <el-option label="EAN_8" value="EAN_8"></el-option>
          <el-option label="EAN_13" value="EAN_13"></el-option>
          <el-option label="ITF" value="ITF"></el-option>
          <el-option label="PDF_417" value="PDF_417"></el-option>
          <el-option label="UPC_E" value="UPC_E"></el-option>
          <el-option label="UPC_A" value="UPC_A"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="数据来源：">
        <el-select v-model="formData.zxing.source" placeholder="请选择" class="w-100pc" @change="imageSourceChange">
          <el-option label="路径" value="text"></el-option>
          <el-option label="表达式" value="expression"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item v-if="formData.zxing.source==='text'" label="路径：">
        <el-input v-model="formData.zxing.value" type="text" title="默认支持以classpath:开头位于classpath下的图片文件，或以/开头位于WEB应用根下或某目录下的图片文件" placeholder="默认支持以classpath:开头位于classpath下的图片文件，或以/开头位于WEB应用根下或某目录下的图片文件" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
      <el-form-item v-if="formData.zxing.source==='expression'" label="数据展开方向：" label-width="120px">
        <el-radio v-model="formData.zxing.expand" label="Down" @change="dataChange">下方</el-radio>
        <el-radio v-model="formData.zxing.expand" label="Right" @change="dataChange">向右</el-radio>
        <el-radio v-model="formData.zxing.expand" label="None" @change="dataChange">关闭</el-radio>
      </el-form-item>
      <el-form-item v-if="formData.zxing.source==='expression'" label="表达式：">
        <el-input v-model="formData.zxing.value" type="textarea" :rows="2" class="w-100pc" @change="dataChange"></el-input>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import propertyHelper from "../components/propertyHelper.js";

export default {
  name: "filter-condition-tab",
  props: {
    designer: {
      type: Object,
      default: () => {
        return {};
      }
    },
    formData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    datasets: {
      type: Array,
      default: () => {
        return [];
      }
    },
    fields: {
      type: Array,
      default: () => {
        return [];
      }
    },
    dataChange: {
      type: Function,
      default: () => {
        return () => {};
      }
    }
  },
  data () {
    return {
      propertyHelper
    };
  },
  watch: {
    "designer.cellDef": {
      handler: function () {
        this.dataInit();
      },
      deep: true
    }
  },
  methods: {
    // 初始化数据
    dataInit () {
      const { cellDef } = this.designer;
      if (!cellDef || !cellDef.value) return;
    }
  }
};
</script>

<style lang="scss" scoped>
.form-container {
  padding-bottom: 20px;
  .el-form-item {
    margin-bottom: 5px;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
  }
  ::v-deep .el-form--label-top .el-form-item__label {
    padding: 0 0 2px;
    line-height: 1.5;
  }
}
</style>
